Introducing ZK browser-kit: Use Native Browser APIs Seamlessly in ZK
Kevin Lin, Engineer, Potix Corporation
Jun. 24, 2025
ZK 8.0.3 or later
Introduction
When building modern web applications, developers often want to leverage native browser capabilities like Geolocation, Clipboard access, or Device Info to provide richer user experiences. However, integrating these JavaScript APIs directly into ZK can be tedious, especially when managing the interaction between client-side scripts and server-side Java code.
To make this easier, we’re introducing browser-kit, a lightweight ZK add-on that wraps commonly used JavaScript APIs into easy-to-use ZK utility class. With browser-kit, developers can access browser-native features from their ZK ViewModels and Composers — no JavaScript coding required.
What is browser-kit?
ZK browser-kit is a free and open-source utility library designed to help web app developers take advantage of JavaScript’s powerful browser APIs without manually writing JS code or bridging ZK events.
It aims to bring popular APIs — such as:
...into the ZK ecosystem in a modular and developer-friendly way.
Currently, only Geolocation is available as the first supported API. More features will be added over time as the toolkit evolves. With browser-kit, eventually you can:
- Call browser APIs directly in your ViewModel/Composer
- Work in pure Java/ZK code
- Avoid custom JavaScript, client-to-server plumbing, and async headaches
How to include browser-kit
For best performance, stability, and feature support, we suggest using ZK 9.0 or newer.
The browser kit is available in the ZK CE repository: https://mavensync.zkoss.org/maven2/org/zkoss/zkforge/browser-kit/ Then, add this Maven dependency:
<dependency>
<groupId>org.zkoss.zkforge</groupId>
<artifactId>browser-kit</artifactId>
<version>${browser-kit.version}</version>
</dependency>
If you are using gradle, please add this into your setting:
implementation "org.zkoss.zkforge:browser-kit:${browserKitVersion}"
GitHub Source Code: https://github.com/zkoss-demo/browser-kit
Geolocation API
As the first feature of browser-kit, Geolocation allows you to obtain the user's latitude and longitude with just a single call — no JS needed.
How it works In your ZK .zul:
<button label="Locate Me" onClick="@command('getLocation')" />
<label id="locationInfo" />
In your ViewModel:
private GeolocationHelper geoLocationHelper;
@Wire
private Label locationLabel;
public void processLocation(GeolocationPositionResult result){
if (result instanceof GeoLocationPosition) {
locationLabel.setValue(result.getPosition().getCoords().getLatitude()+","
+result.getPosition().getCoords().getLongitude());
} else {
Clients.log("error: " + result.getError().getMessage());
}
}
@Command
public void getLocation() {
return geoLocationHelper.requestLocation();
}
You can now display the latitude and longitude of your current location.
Conclusion
With ZK browser-kit, web app developers can now easily tap into useful JavaScript browser APIs directly from Java — without writing a single line of JS.
Whether you need Geolocation for maps and delivery, Clipboard for UX, or Media APIs for camera checks, this toolkit aims to make native browser capabilities feel like a natural part of your ZK toolbox. Stay tuned as we continue adding more browser capabilities — one API at a time.